<template>
  <div class="">
    <!-- <ToolItem title="环境设置" type="environment" @select="$emit('active', $event)">
      <icon-cloud :style="{ fontSize: '25px' }" />
    </ToolItem> -->
    <!-- <div class="right-tools" v-if="active == 'environment'"> -->
    <div class="wh" v-if="true" style="display: flex; flex-wrap: wrap;align-content: flex-start;">
      <!-- 经纬网 -->
      <div :style="{ backgroundColor: jingweiwang ? '#068CC0' : '' }" class="tianqiitemclass"
        @click="jingweiwangclick((jingweiwang = !jingweiwang))" title="经纬网">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/jingweiwangge.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- zxy网格3857 -->
      <div :style="{ backgroundColor: zxywang ? '#068CC0' : '' }" class="tianqiitemclass"
        @click="zxywangclick((zxywang = !zxywang))" title="系统数据库文件网格3857">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/zxy.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- zxy网格4326 -->
      <div :style="{ backgroundColor: jzxywang ? '#068CC0' : '' }" class="tianqiitemclass"
        @click="jzxywangclick((jzxywang = !jzxywang))" title="系统数据库文件网格4326">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/zxy.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 罗盘 -->
      <div :style="{ backgroundColor: showCompass ? '#068CC0' : '' }" class="tianqiitemclass" @click="showCompass = !showCompass"
        title="罗盘">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/luopan.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 比例尺 -->
      <div :style="{ backgroundColor: showDistanceLegend ? '#068CC0' : '' }" class="tianqiitemclass" @click="showDistanceLegend = !showDistanceLegend"
        title="比例尺">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/bilichi.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 状态栏 -->
      <div :style="{ backgroundColor: estore.stausbarshow ? '#068CC0' : '' }" class="tianqiitemclass" @click="estore.stausbarshow = !estore.stausbarshow"
        title="状态栏">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/fps.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 鸟瞰图 -->
      <div :style="{ backgroundColor: estore.eagleviewshow ? '#068CC0' : '' }" class="tianqiitemclass" @click="estore.eagleviewshow = !estore.eagleviewshow"
        title="鸟瞰图">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/niaokantu.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <div :style="{  }" class="tianqiitemclass" @click="switch2d3d"
        title="2d/3d">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <svg t="1699858975473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12890" width="30" height="30"><path d="M46.546127 1024v-62.230849l119.621711-224.953455a82.124801 82.124801 0 0 0 10.379974-29.556929c0.929998-10.425975 1.395997-20.898949 1.302997-31.370924l-0.279999-17.779957a43.147896 43.147896 0 0 0-3.629991-16.57096 30.672926 30.672926 0 0 0-9.773977-12.054971 31.091925 31.091925 0 0 0-18.804954-4.793988 32.814921 32.814921 0 0 0-23.737943 8.37798c-5.910986 5.584986-8.749979 13.962966-8.749978 24.66894v37.608909H46.546127v-36.305912a99.985758 99.985758 0 0 1 29.230929-70.655829c18.384955-19.083954 43.752894-29.835928 70.23683-29.835928 17.361958 0 32.115922 3.165992 44.589892 9.355978 12.33497 6.283985 22.528945 14.801964 30.813926 25.646937 7.819981 10.844974 13.543967 23.179944 17.267958 36.956911 3.723991 13.869966 5.491987 28.531931 5.491987 44.077893 0 11.170973-0.186 20.66595-0.650999 28.159932-0.465999 7.586982-1.302997 14.801964-2.606993 21.736947a91.556778 91.556778 0 0 1-6.515985 20.75995 395.819041 395.819041 0 0 1-12.33497 25.272939l-97.511764 187.391546h119.620711V1024H46.546127z m250.926393 0V562.456118h98.163762c38.074908 0 67.025838 10.332975 86.76079 31.092924C502.180024 614.307992 512 643.630921 512 681.705829v215.877477c0 43.286895-10.472975 75.029818-31.557924 95.649769-20.991949 20.47995-51.199876 30.766925-90.66978 30.766925h-92.299776z m66.326839-399.359033v337.128184h30.533926c18.617955 0 31.836923-4.654989 39.656904-13.869967 7.819981-9.309977 11.682972-23.924942 11.682972-43.846894V681.705829c0-18.152956-3.723991-32.209922-11.031974-42.123898-7.446982-9.913976-20.80495-14.893964-40.307902-14.893964H363.800359zM99.282 361.799604c0-174.126578 140.42766-315.252236 313.52924-315.252237h0.791998v87.645788h-0.790998c-124.881698 0-226.396452 102.026753-226.396451 227.699449v1.954995h106.448742l-146.431646 146.849644L0.00124 363.755599h99.28076v-1.954995zM919.319014 660.852879c0 174.079578-140.28766 315.205237-313.436241 315.205237h-0.790998v-87.504788h0.790998c124.927697 0 226.396452-102.167753 226.396451-227.699449v-1.955995H725.969482L872.261127 512.00124l146.431646 146.896644h-99.28176v2.001995l-0.092999-0.047zM631.016712 182.507038c18.291956 0 30.905925-2.187995 37.840908-6.562984 6.981983-4.374989 10.472975-14.521965 10.472975-30.439926V90.67226a29.695928 29.695928 0 0 0-8.051981-21.503948 28.85793 28.85793 0 0 0-21.783947-8.331979c-10.704974 0-18.384955 3.397992-22.946944 10.146975a35.234915 35.234915 0 0 0-6.887984 19.688952v34.582917h-60.834852V90.067262a88.249786 88.249786 0 0 1 26.855935-63.812846 98.194762 98.194762 0 0 1 29.230929-19.083953C626.221723 2.376474 638.416694-0.09052 650.704664 0.00248c16.70996 0 30.487926 3.257992 41.4259 9.867976 10.937974 6.515984 19.176954 13.218968 24.76194 19.967952 3.95599 4.746989 7.446982 9.540977 10.425975 14.289965 2.979993 4.792988 5.492987 10.564974 7.447981 17.313958 3.583991 13.125968 5.351987 32.581921 5.351988 58.460859 0 14.707964-0.278999 26.623936-0.883998 35.793913a74.23982 74.23982 0 0 1-4.46799 22.619945 45.149891 45.149891 0 0 1-11.636971 16.104961 138.239665 138.239665 0 0 1-20.572951 14.335965c9.541977 5.957986 16.802959 11.543972 21.782948 16.70996 4.979988 5.119988 8.657979 11.124973 11.031973 17.873957 2.372994 7.167983 3.769991 15.591962 4.18899 25.366938 0.371999 9.727976 0.604999 22.155946 0.604998 37.23591 0 13.963966-0.325999 25.459938-0.930997 34.629916a176.872572 176.872572 0 0 1-2.652994 22.667945c-1.209997 6.329985-2.792993 11.682972-4.793988 16.103961a96.349767 96.349767 0 0 1-36.677911 41.4259c-11.729972 7.353982-27.135934 11.030973-46.219889 11.030973-9.541977 0-19.688952-1.581996-30.393926-4.746988a82.943799 82.943799 0 0 1-29.229929-15.546963 84.432796 84.432796 0 0 1-21.783947-28.019932c-5.770986-11.542972-8.656979-25.599938-8.656979-42.355897v-34.583916h60.834852V338.201661c0 9.541977 2.699993 17.361958 8.051981 23.551943a27.414934 27.414934 0 0 0 21.782947 9.215978 27.414934 27.414934 0 0 0 21.783947-9.215978c5.351987-6.189985 8.004981-14.428965 8.004981-24.76194v-60.834853c0-16.755959-3.164992-27.647933-9.494977-32.81392a26.483936 26.483936 0 0 0-14.614965-5.957986 196.374524 196.374524 0 0 0-24.156941-1.209997v-53.66687z m145.546647 249.343396V0.00248h91.880778c35.653914 0 62.742848 9.727976 81.174803 29.08993 18.478955 19.456953 27.694933 46.918886 27.694933 82.5258v201.959511c0 40.448902-9.867976 70.28383-29.509928 89.460783-19.688952 19.222953-47.941884 28.85793-84.851795 28.85793h-86.388791z m62.04485-373.619095V373.621575h28.625931c17.407958 0 29.788928-4.374989 37.09691-13.031968 7.259982-8.703979 10.937974-22.341946 10.937973-40.959901V111.57121c0-16.941959-3.444992-30.113927-10.332975-39.376905-6.935983-9.309977-19.455953-13.963966-37.701908-13.963966h-28.625931z" p-id="12891" fill="#fff"></path></svg>
      </div>
      <!-- 清空 -->
      <div :style="{ backgroundColor: '' }" class="tianqiitemclass" @click="qingkongclick()" title="清空">
        <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/qingkong.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
    </div>
  </div>
</template>

<script>
// import ToolItem from '@/components/map/tools/ToolItem.vue'

import _ from 'lodash'
import './Graticule.js'
import { useEarthStore } from '@/stores/earth'

let pickEntity = null
export default {
  name: '',
  components: {
    // ToolItem,
  },
  data() {
    return {
      itemchoose: false,
      daqi: false,
      yin: false,
      qing: false,
      yu: false,
      xue: false,
      jingweiwang: false,
      zxywang: false,
      jzxywang: false,
      lisanwangge: false,
      terrainExaggeration: 1.0,
      dixingkuazhang: 1.0,
      showCompass: 1.0,
      showDistanceLegend: 1.0,
      estore: useEarthStore()
    }
  },
  computed: {
    active() {
      // return this.activeToolParent.value || this.activeTool.value || null
      return true
    }
  },
  // inject: ['activeTool','activeToolParent'],
  watch: {

  },
  mounted() {
    this._gridImagery = new Cesium.GridImageryProvider()
    this._jzxyImagery = new Cesium.TileCoordinatesImageryProvider();
    this._zxyImagery = new Cesium.TileCoordinatesImageryProvider({
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      color: Cesium.Color.fromCssColorString("#F00")
    });
    // require('./Graticule.js')

    // console.log(window.Graticule);
    this._jingweiImagery = new window.Graticule({
      tileWidth: 512,
      tileHeight: 512,
      numLines: 10,
      color: Cesium.Color.GREEN,//线颜色
      fontColor: Cesium.Color.YELLOW, // 文字颜色
      weight: 2.8, // 线宽度|默认0.8
      zoomInterval: [
        Cesium.Math.toRadians(0.05),
        Cesium.Math.toRadians(0.1),
        Cesium.Math.toRadians(0.2),
        Cesium.Math.toRadians(0.5),
        Cesium.Math.toRadians(1.0),
        Cesium.Math.toRadians(2.0),
        Cesium.Math.toRadians(5.0),
        Cesium.Math.toRadians(10.0)
      ]// 不同地图缩放级别显示网格的间隔
    }, viewer.scene);

    // console.log(this._jingweiImagery);
    // this._jingweiImagery.setVisible(!this._jingweiImagery.isVisible());


    // 绑定大气
    window.XE.MVVM.bind(
      this,
      'daqi',
      window.earth,
      'weather.atmosphere.enabled'
    )
    // 绑定雨
    window.XE.MVVM.bind(
      this,
      'yu',
      window.earth,
      'weather.rainPostProcess.enabled'
    )
    // 绑定雪
    window.XE.MVVM.bind(
      this,
      'xue',
      window.earth,
      'weather.snowPostProcess.enabled'
    )

    // 绑定罗盘
    window.XE.MVVM.bind(
      this,
      'showCompass',
      window.earth,
      'camera.navigator.showCompass'
    )
    // 绑定比例尺
    window.XE.MVVM.bind(
      this,
      'showDistanceLegend',
      window.earth,
      'camera.navigator.showDistanceLegend'
    )

    XE.MVVM.bind(
      this,
      "terrainExaggeration",
      earth.terrainEffect,
      "terrainExaggeration"
    )
    // this.initMap()
  },
  methods: {
    switch2d3d(){
      // viewer.scene.mode = Cesium.SceneMode.MORPHING
      if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
        viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW
      }else{
        viewer.scene.mode = Cesium.SceneMode.SCENE3D
      }
    },
    closewindow() {
      this.qingkongclick()
    },
    qingkongclick() {
      // 阴晴雨雪 网格 离散网格
      this.yu = false
      this.xue = false
      this.yin = false
      this.changetianqiyin(false)
      this.qing = false
      this.changetianqiqing(false)

      this.jingweiwang = false
      if (_.has(this, '_tmpgridImagery')) {
        this.jingweiwangclick(false)
      }

      this.zxywang = false
      if (_.has(this, '_tmpzxyImagery')) {
        this.zxywangclick(false)
      }

      this.jzxywang = false
      if (_.has(this, '_tmpjzxyImagery')) {
        this.jzxywangclick(false)
      }

      // this.lisanwangge = false
      // this.toggleMoerGrid(false)
    },
    jingweiwangclick(type) {
      if (type) {
        this._jingweiImagery.setVisible(true)
        this._tmpgridImagery =
          viewer.imageryLayers.addImageryProvider(
            this._jingweiImagery
          )

      } else {
        this._jingweiImagery.setVisible(false)
        viewer.imageryLayers.remove(this._tmpgridImagery)
      }
      // if (type) {
      //   this._tmpgridImagery =
      //     viewer.imageryLayers.addImageryProvider(
      //       this._gridImagery
      //     )
      // } else {
      //   viewer.imageryLayers.remove(this._tmpgridImagery)
      // }
    },

    jzxywangclick(type) {
      if (type) {
        this._tmpjzxyImagery =
          viewer.imageryLayers.addImageryProvider(
            this._jzxyImagery
          )
      } else {
        viewer.imageryLayers.remove(this._tmpjzxyImagery)
      }
    },

    zxywangclick(type) {
      if (type) {
        this._tmpzxyImagery =
          viewer.imageryLayers.addImageryProvider(
            this._zxyImagery
          )
      } else {
        viewer.imageryLayers.remove(this._tmpzxyImagery)
      }
    },
    changetianqiqing(type) {
      if (type) {
        this.yin = false
        window.earth.weather.skyBox = {
          skyBoxOnGround: true,
          westSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/west.jpg',
          southSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/south.jpg',
          eastSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/east.jpg',
          northSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/north.jpg',
          topSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/top.jpg',
          bottomSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/bottom.jpg',
        }
      } else {
        window.earth.weather.skyBox.skyBoxOnGround = false
      }
    },
    changetianqiyin(type) {
      if (type) {
        this.qing = false
        window.earth.weather.skyBox = {
          skyBoxOnGround: true,
          westSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/west.jpg',
          southSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/south.jpg',
          eastSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/east.jpg',
          northSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/north.jpg',
          topSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/top.jpg',
          bottomSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/bottom.jpg',
        }
      } else {
        window.earth.weather.skyBox.skyBoxOnGround = false
      }
    },
    changetianqi(type) {
      switch (type) {
        case 'yin':
          this.yin = !this.yin
          this.qing = false
          if (this.yin) {
            window.earth.weather.skyBox = {
              skyBoxOnGround: true,
              westSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/west.jpg',
              southSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/south.jpg',
              eastSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/east.jpg',
              northSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/north.jpg',
              topSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/top.jpg',
              bottomSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/bottom.jpg',
            }
          } else {
            window.earth.weather.skyBox.skyBoxOnGround = false
          }
          break
        case 'qing':
          this.qing = !this.qing
          this.yin = false
          if (this.qing) {
            window.earth.weather.skyBox = {
              skyBoxOnGround: true,
              westSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/west.jpg',
              southSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/south.jpg',
              eastSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/east.jpg',
              northSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/north.jpg',
              topSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/top.jpg',
              bottomSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/bottom.jpg',
            }
          } else {
            window.earth.weather.skyBox.skyBoxOnGround = false
          }
          break

        default:
          break
      }
    },
    toolSelect() {
      // this.itemchoose = !this.itemchoose
    },
    /**
     * 离散格网
     */
    toggleMoerGrid(type) {
      if (type) {
        this.getGridByType()
      } else {
        this.clearGrid()
      }
    },
    // 请求获取网格
    // 获取屏幕可视范围
  },
}
</script>

<style lang="scss" scoped>
.tianqiitemclass {
  border: 1px solid #fff9;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  // border-radius: 6px 6px 6px 6px;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;

  &:hover {
    background-color: #068cc088;
  }
}

.zhjx-iconfont {
  font-size: 25px !important;
}

.right-tools {
  border-radius: 6px 6px 6px 6px;
  // position: absolute;
  // right: 75px;
  // top: 20px;
  z-index: 2;
  width: 50px;
  background: #083967;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
